<!DOCTYPE html>
<!-- 问题评分页面 -->
<!-- author: 荆世鑫 -->
<!-- 2020/4/29 -->
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no viewport-fit=cover" />
		<link rel="stylesheet" href="../Common/css/ufun.css">
		<script src="../Common/js/mui.min.js"></script>
		<script src="../Common/js/tools.js"></script>
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<style>
			body {
				font-family: "Source Han Sans CN";
				background-color: #fff;
				overflow-x: hidden;
				overflow-y: hidden;
				padding-left: env(safe-area-inset-left);
				padding-right: env(safe-area-inset-right);
			}
			
			html, .Content{
				background-color: white;
			}
			
			.head-image {
				text-align: center;
			}
			
			.head-image img{
				height: 30vh;
				width: 60%;
			}
			
			.option{
				display: inline-block;
			}
			
			.Content {
				text-align: center;
			}
			
			#note {
				display: block;
				height: calc(20vh - 12vw);
				padding-top: calc(10vh - 6vw);
				margin: 5vh auto 0 auto;
				font-size: 5vw;
			}
			.circle-x {
				background: var(--color-yellow);
				position: fixed;
				overflow: hidden;
			}
			
			#Circle1 {
				right: -11vh;
				bottom: -5vh;
				width: 15vh;
				height: 15vh;
				-moz-border-radius: 10vh;
				-webkit-border-radius: 10vh;
				border-radius: 10vh;
			}
			
			#Circle2 {
				right: -5vh;
				bottom: -13vh;
				width: 18vh;
				height: 18vh;
				-moz-border-radius: 10vh;
				-webkit-border-radius: 10vh;
				border-radius: 10vh;
			}
			
			#Circle3 {
				left: -3vh;
				bottom: -10vh;
				width: 15vh;
				height: 15vh;
				-moz-border-radius: 10vh;
				-webkit-border-radius: 10vh;
				border-radius: 10vh;
			}
			
			#Circle4 {
				left: -10vh;
				bottom: -3vh;
				width: 14vh;
				height: 14vh;
				-moz-border-radius: 10vh;
				-webkit-border-radius: 10vh;
				border-radius: 10vh;
			}
			
			.score-accuracy{
				padding-bottom: 3px;
				border-bottom: 1px solid var(--color-black);
			}
			
			.score-fluency{
				padding-bottom: 3px;
				border-bottom: 1px solid var(--color-black);
			}
			
			.score-understand{
				padding-bottom: 3px;
				border-bottom: 1px solid var(--color-black);
			}
			
			.star-box{
				display: block;
				height: 6vh;
				padding: 1vh;
			}
			
			.star {
				display: inline;
			}
			
			.star li {
				width: 9vw;
				display: inline-block;
				color: var(--color-black);
				font: bold 25px arial;
				font-size: 7vw;
				cursor: pointer;
				transition: color 0.1s;
			}
			
			.star .act {
				color: var(--color-yellow);
			}
			
			.set-btn-container {
				margin: 2.9vh auto 0vh auto;
				text-align: center;
			}
			
			.set-btn {
				width: 50%;
				height: 5.5vh;
				background: var(--color-yellow);
				border-radius: 4.8vh;
				border-style: none;
				color: #4b4a48;
				font-size: 3vw;
				margin-top: 3vh;
			}
		</style>
	</head>
	<body>
		<div class="circle-container">
			<div id="Circle1" class="circle-x"></div>
			<div id="Circle2" class="circle-x"></div>
			<div id="Circle3" class="circle-x"></div>
			<div id="Circle4" class="circle-x"></div>
		</div>
		<div class="Content">
			<div id="note">
				问题结束了<br />
				给答题的同学评个分吧
			</div>
			<div class="head-image">
				<img src="../Login/img/pic-question-score.svg">
			</div>
			<div class="star-box">
				<p class="option"><span class="score-accuracy">正确度</span>&nbsp;&nbsp;&nbsp;</p>
				<ul id="star1" class="star">
					<li>★</li>
					<li>★</li>
					<li>★</li>
					<li>★</li>
					<li>★</li>
				</ul>
			</div>
			<div class="star-box">
				<p class="option"><span class="score-fluency">流畅度</span>&nbsp;&nbsp;&nbsp;</p>
				<ul id="star2" class="star">
					<li>★</li>
					<li>★</li>
					<li>★</li>
					<li>★</li>
					<li>★</li>
				</ul>
			</div>
			<div class="star-box">
				<p class="option"><span class="score-understand">易懂度</span>&nbsp;&nbsp;&nbsp;</p>
				<ul id="star3" class="star">
					<li>★</li>
					<li>★</li>
					<li>★</li>
					<li>★</li>
					<li>★</li>
				</ul>
			</div>
		</div>
		<form name="next" class="set-btn-container" onsubmit="setScore();return false;" action="">
			<button type="submit" class="set-btn">提交</button>
		</form>
		<script>
			mui.init();
			var currnt;
			var userHash;
			
			mui.plusReady(function() {
				GetStatusTop();
				current = plus.webview.currentWebview();
				userHash = plus.storage.getItem('userHash');
				DoShow(current);
			});
			
			var starStatus = new Array(-1, -1, -1);
			
			/*
			 * drawStar 画出星星
			 *   k 用来标识当前需要更新第几栏(1..3)
			 *   i 选择的评分(1..5)
			 */
			function drawStar(k, i) {
				// 获取第k个星星栏的星星们
				var starliArr = document.getElementById("star" + k).getElementsByTagName("li");
				// draw
				var j = 0;
				for(j; j <= i; j++) {
					starliArr[j].className = 'act';
				}
				for(j; j < starliArr.length; j++) {
					starliArr[j].className = '';
				}
				starStatus[k - 1] = i + 1;
			}
			
			function setScore() {
				for(var k = 0; k < 3; k++) 
					if (starStatus[k] == -1) {
						plus.nativeUI.alert("请完成所有评分项目", "评分未完成");
						return;
					}
				CallAJAX('setScore', {
					"userHash": userHash,
					"quesId": current.quesId,
					"score": [starStatus[0], starStatus[1], starStatus[2]]
				}, function() {
					ThisClose();
				}, function() {
					ThisClose();
				});
			}
			
			window.onload = function() {
				for(var k = 1; k <= 3; k++) {
					// 获取第k个星星栏的星星们
					var starliArr = document.getElementById("star" + k).getElementsByTagName("li");
					//用for循环对li进行遍历 
					for(var i = 0; i < starliArr.length; i++) {
						// 将匿名函数赋值给onclick
						starliArr[i].onclick = Function("drawStar(" + k + ", " + i + ");");
					}
				}
			}
		</script> 
	</body>

</html>